import { ReactComponent as Chevron } from '@/assets/images/shared/icon-chevron.svg';
import { innerUrls } from '@/shared/constants/urls';
import { getImageUrl } from '@/shared/lib/images';
import { Button } from '@/shared/ui/Button';
import Image from 'next/image';

import cs from './CompanyInfoCard.module.scss';

export const CompanyInfoCard = ({
  id,
  logo,
  title,
  description,
}: {
  id: number;
  logo: string;
  title: string;
  description: string;
}) => (
  <Button className={cs.company} data-testid={`link-company-${id}`} href={innerUrls.company(id)} link target="_blank">
    <div className={cs.logo}>
      <Image
        alt={title}
        fill
        sizes="100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, (max-width: 1366px) 25vw, 20vw"
        src={getImageUrl(logo)}
      />
    </div>
    <div className={cs.text_content}>
      <p className={title.length > 26 ? cs.title : cs.titleSmall}>{title}</p>
      <p className={cs.description}>{description}</p>
    </div>
    <div className={cs.arrow}>
      <Chevron />
    </div>
  </Button>
);
